<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="550" height="370"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Settings ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '20px sans-serif';

    // --- Coordinates ---
    const x_left = 80;
    const x_res800_start = 150;
    const x_res800_end = 250;
    const x_bat_start = 150;
    const x_bat_end = 250;
    const x_p1 = 350; // 450 Ohm resistor
    const x_p2 = 420; // LDR
    const y_top = 80;
    const y_bottom = 280;

    // --- Draw Wires ---
    ctx.beginPath();
    // Left wire
    ctx.moveTo(x_left, y_top);
    ctx.lineTo(x_left, y_bottom);
    // Bottom wire
    ctx.moveTo(x_left, y_bottom);
    ctx.lineTo(x_res800_start, y_bottom);
    ctx.moveTo(x_res800_end, y_bottom);
    ctx.lineTo(x_p1, y_bottom);
    // Top wire
    ctx.moveTo(x_left, y_top);
    ctx.lineTo(x_bat_start, y_top);
    ctx.moveTo(x_bat_end, y_top);
    ctx.lineTo(x_p1, y_top);
    // Parallel Branch
    // Top and bottom connectors
    ctx.moveTo(x_p1, y_top);
    ctx.lineTo(x_p2, y_top);
    ctx.moveTo(x_p1, y_bottom);
    ctx.lineTo(x_p2, y_bottom);
    // Vertical wires for parallel components
    ctx.moveTo(x_p1, y_top);
    ctx.lineTo(x_p1, y_bottom);
    ctx.moveTo(x_p2, y_top);
    ctx.lineTo(x_p2, y_bottom);
    ctx.stroke();

    // --- Draw Components ---

    // Battery (replicating the image's symbol)
    const y_l_h = 20; // long plate half-height
    const y_s_h = 12; // short plate half-height
    const bat_c_x = (x_bat_start + x_bat_end) / 2;
    const bat_cell_dist = 20;
    const bat_plate_dist = 10;
    ctx.beginPath();
    // Cell 1
    ctx.moveTo(bat_c_x - bat_cell_dist, y_top - y_l_h);
    ctx.lineTo(bat_c_x - bat_cell_dist, y_top + y_l_h); // Left long plate
    ctx.moveTo(bat_c_x - bat_cell_dist + bat_plate_dist, y_top - y_s_h);
    ctx.lineTo(bat_c_x - bat_cell_dist + bat_plate_dist, y_top + y_s_h); // Left short plate
    // Cell 2
    ctx.moveTo(bat_c_x + bat_cell_dist - bat_plate_dist, y_top - y_l_h);
    ctx.lineTo(bat_c_x + bat_cell_dist - bat_plate_dist, y_top + y_l_h); // Right long plate
    ctx.moveTo(bat_c_x + bat_cell_dist, y_top - y_s_h);
    ctx.lineTo(bat_c_x + bat_cell_dist, y_top + y_s_h); // Right short plate
    ctx.stroke();
    // Dashed line between cells
    ctx.beginPath();
    ctx.setLineDash([5, 3]);
    ctx.moveTo(bat_c_x - bat_cell_dist + bat_plate_dist, y_top);
    ctx.lineTo(bat_c_x + bat_cell_dist - bat_plate_dist, y_top);
    ctx.stroke();
    ctx.setLineDash([]);
    ctx.textAlign = 'center';
    ctx.fillText('9.0 V', bat_c_x, y_top - 35);

    // 800 Ohm Resistor
    const res800_w = x_res800_end - x_res800_start;
    ctx.strokeRect(x_res800_start, y_bottom - 10, res800_w, 20);
    ctx.fillText('800 Ω', bat_c_x, y_bottom - 25);

    // 450 Ohm Resistor
    const res_h = 80;
    const y_center = y_top + (y_bottom - y_top) / 2;
    ctx.strokeRect(x_p1 - 10, y_center - res_h/2, 20, res_h);
    ctx.textAlign = 'right';
    ctx.fillText('450 Ω', x_p1 - 20, y_center);

    // LDR
    ctx.strokeRect(x_p2 - 10, y_center - res_h/2, 20, res_h);
    // Arrows for LDR
    function drawArrow(x_start, y_start, length, angle) {
        const x_end = x_start - length * Math.cos(angle);
        const y_end = y_start + length * Math.sin(angle);
        ctx.moveTo(x_start, y_start);
        ctx.lineTo(x_end, y_end);
        // Arrowhead
        const head_len = 8;
        const head_angle = Math.PI / 6;
        ctx.moveTo(x_end, y_end);
        ctx.lineTo(x_end + head_len * Math.cos(angle - head_angle), y_end - head_len * Math.sin(angle - head_angle));
        ctx.moveTo(x_end, y_end);
        ctx.lineTo(x_end + head_len * Math.cos(angle + head_angle), y_end - head_len * Math.sin(angle + head_angle));
    }
    ctx.beginPath();
    drawArrow(x_p2 + 40, y_center - 45, 30, Math.PI / 3.5);
    drawArrow(x_p2 + 50, y_center - 35, 30, Math.PI / 3.5);
    ctx.stroke();

    // Junction dots
    ctx.beginPath();
    ctx.arc(x_p1, y_top, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x_p1, y_bottom, 4, 0, 2 * Math.PI);
    ctx.fill();

    // Figure label
    ctx.textAlign = 'center';
    ctx.font = 'bold 20px sans-serif';
    ctx.fillText('Fig. 8.1', bat_c_x + 50, y_bottom + 60);
</script>
</body>
</html>